<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">扫描首件上料</block>
			</cu-custom>
			<!-- 查询条件 -->
			<view class="fixed" :style="[{animationDelay: 0.1 + 's'}]">
				<form>
					<view class="cu-form-group">
						<view class="title">扫描线别：</view>
						<input :focus="focus_index == 0" placeholder="请扫描线别" name="input" v-model="myFormData.lineType" @confirm="inputQuery(0,$event)"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">扫描机器：</view>
						<input :focus="focus_index == 1" placeholder="请扫描机器" name="input" v-model="myFormData.machine" @confirm="inputQuery(1,$event)"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">扫描通道：</view>
						<input :focus="focus_index == 2" placeholder="请扫描通道" name="input" v-model="myFormData.passageway" @confirm="inputQuery(2,$event)"></input>
					</view>
					<view class="cu-form-group last">
						<view class="title">扫描feeder：</view>
						<input :focus="focus_index == 3" placeholder="请扫描feeder" name="input" v-model="myFormData.feeder" @confirm="inputQuery(3,$event)"></input>
					</view>
				</form>
			</view>
			<view class="list">
				<view class="card animation-slide-bottom" v-for="(item,index) in list" :key="index" :style="[{animationDelay: (index + 1)*0.1 + 's'}]">
					<view class="top">
						<view>物料编号：<text style="color: red;">{{item.productCode}}</text></view>
						<view style="background-color:#1CBBB4;color: white;padding: 10rpx;border-radius: 10rpx;">{{item.inwareNum}}</view>
					</view>
					<view class="bottom">
						<view class="box">
							<view class="lable">
								创建时间:
							</view>
							<view class="content">
								{{item.createTime}}
							</view>
						</view>
						<view class="box">
							<view class="lable">
								名称:
							</view>
							<view class="content">
								{{item.productName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'scanShipment',
		data() {
			return {
				id: '',
				myFormData: {
					lineType: '',
					machine: '',
					passageway: '',
					feeder: ''
				},
				list: [],
				focus_index:-1
			}
		},
		onLoad(e) {
			this.id = uni.getStorageSync('firstPieceLoadingIdDetailId');
			// this.getMesStorageWholesaleList()
			console.log(this.id)
		},
		methods: {
			// 列表查询
			// getMesStorageWholesaleList(){
			// 	let data = {
			// 		pageNo: 1,
			// 		pageSize: 10000,
			// 		baseRownum:this.id
			// 	}
			// 	this.$http.get('storage/mesStorageWholesale/list', {
			// 		params: data
			// 	}).then(res => {
			// 		console.log("res1::", res)
			// 		if (res.data.success) {
			// 			this.list = res.data.result.records;
			// 		} else {
			// 			this.$tip.error(res.data.message)
			// 		}
			// 	})
			// },
			// 扫码查询
			inputQuery(index, e) {
				if (e.detail.value.replace(/\s+/g, "") != '') {
					// var inputs = document.getElementsByTagName("input");
					if (index == 3) {
						uni.showLoading({
							mask:true,
							title:'查询中.....'
						})
						this.$http.get('/produce/mesOnlineMaterieltable/list', this.myFormData).then(res => {
							uni.hideLoading()
							if (res.data.success) {
								if(res.data.result.records.length == 0){
									// this.$tip.error(res.data.message)
                  this.modal.show({ type:'error', content:res.data.message })
								}else{
									this.getMesStorageWholesaleAdd(res.data.result.records[0])
								}
							} else {
								// this.$tip.error(res.data.message)
                this.modal.show({ type:'error', content:res.data.message })
							}
						})

					} else {
						this.focus_index = Number(index) + 1
					}
				}
			},
			// 添加
			getMesStorageWholesaleAdd(item) {
				let data = item
				data.baseDockettype = '扫描首件上料';
				data.baseCode = data.id;
				data.id = '';
				data.baseRownum = this.id
				data.createBy =""
				data.createTime =""
				this.$http.post('storage/mesStorageWholesale/add',data
				).then(res => {
					console.log("res3::", res)
					if (res.data.success) {
						this.myFormData.lineType = '';
						this.myFormData.machine = '';
						this.myFormData.passageway = '';
						this.myFormData.feeder = '';
						// this.$tip.success(res.data.message)
            this.modal.show({ type:'success', content:res.data.message })
					} else {
						// this.$tip.error(res.data.message)
            this.modal.show({ type:'error', content:res.data.message })
					}
				})
			}
		},
	}
</script>

<style lang="less">
	input {
		border: 2rpx solid #F0F0F0;
		height: 60rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.fixed {
		position: fixed;
		z-index: 1;
		width: 100%;
		background-color: white;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}

	.list {
		margin-top: 120rpx;
	}

	.card {
		margin: 30rpx;
		box-shadow: 0px 0px 5rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 30rpx;
		background-color: white;
	}

	.card .top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F0F0F0;
		padding-bottom: 20rpx;
		font-weight: bold;
	}

	.card .bottom .box {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.card .bottom .box .lable {
		width: 25%;
	}

	.card .bottom .box .content {
		width: 74%;
		text-align: right;
	}

	.title {
		width: 30%;
	}
</style>
